<template>
  <div class="right-bottom-nav" v-show="rightBtNavVisible">
    <div
      class="item"
      v-for="(item, index) in navList"
      :key="index"
      @click="itemClick(item)"
    >
      <div class="item-box" v-if="navItemShow(item)">
        <span v-if="item.text">{{ item.text }}</span>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
// import { useRouter } from "vue-router";
import { useUserStore } from "@/store/modules/user";
import useSroll from "@/hooks/useScroll";
import { computed } from "vue";
import { scrollTo } from "@/utils/scorllTo";

// const router = useRouter();
const userStore = useUserStore();

const token = computed(() => userStore.token);

const { rightBtNavVisible, schedule } = useSroll();

const navList = [
  {
    name: "进度",
    text: schedule,
    icon: "",
    isToken: false,
    calback: () => {}
  },
  {
    name: "回到顶部",
    text: "TOP",
    icon: "",
    isToken: true,
    calback: () => {
      scrollTo(0);
    }
  }
];

const itemClick = (item: { calback: Function }) => {
  item.calback();
};

const navItemShow = (item: { isToken: boolean }) => {
  if (item.isToken) {
    return token.value ? true : false;
  } else {
    return true;
  }
};
</script>

<style lang="scss" scoped>
.right-bottom-nav {
  position: fixed;
  bottom: 50px;
  right: 15px;
  width: 50px;
  padding: 0 5px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  .item {
  }
}

.item-box {
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #409eff;
  border-radius: 5px;
  cursor: pointer;

  // &:hover {
  //   background-color: #fff;
  // }

  span {
    font-size: 13px;
    font-weight: bold;
    color: #fff;
  }
}

.bnavicon {
  color: #fff;
  vertical-align: -2px;
}
</style>
